<template>
  <div id="questionsView">
    <a-form :model="searchParams" layout="inline">
      <div style="width: 85%;">
        <a-form-item field="name" label="名称" style="min-width: 240px">
          <a-input :style="{ width: '240px' }" v-model="searchParams.name" placeholder="请输入名称" />
        </a-form-item>
      </div>
      <div style="width: 15%;" v-if="isAdmin==1">
        <a-button style="text-align: right;" type="primary" @click="toCreateCompetition()">新增竞赛</a-button>
      </div>
    </a-form>
    <a-table :ref="tableRef" :columns="columns" :data="dataList" column-resizable :pagination="{
      showTotal: true,
      pageSize: searchParams.pageSize,
      current: searchParams.current,
      total,
    }" @page-change="onPageChange">
    <template #name = "{record}">
      <a-link v-on:click="toCompetitionDetails(record.id)" :hoverable="true">
        {{ record.name }}
      </a-link>
    </template>
    <template #status = "{record}">
      <p style="font-weight: bolder" :style="{color: getColor(record.status)}">{{record.statusText}}</p>
    </template>
    <template #startEndTime = "{record}">
      {{ record.startTime + "~" + record.endTime }}
    </template>
    <template #questionNum = "{record}">
      {{ record.questionNum + "题" }}
    </template>
    <template #user = "{record}">
      {{ record.user.nickname }}
    </template>
    <template #optional="{ record }">
      <a-space>
        <a-button v-if="record.status==1&&isAdmin==1" type="primary" @click="doUpdate(record.id)">修改</a-button>
        <a-button v-if="record.status==1&&isAdmin==1" status="danger" @click="doDelete(record.id)">删除</a-button>
      </a-space>
    </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watchEffect } from "vue";
import {
  CompetitionControllerService,
  QuestionControllerService,
  CompetitionVO,
} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import ACCESS_ENUM from "@/access/accessEnum";
// import moment from "moment";

const tableRef = ref();
const dataList = ref([]);
const total = ref(0);
const searchParams = ref({
  name: "",
  pageSize: 8,
  current: 1,
});
const isAdmin = ref();

const store = useStore();

const loadData = async () => {
  const res = await CompetitionControllerService.listPageCompetitionVoUsingPost(
    {
    ...searchParams.value,
    sortField: "createTime",
    sortOrder: "descend",
    }
  );
  if (res.code === 0) {
    dataList.value = res.data.records;
    total.value = res.data.total;
  } else {
    message.error("加载失败，" + res.message);
  }

  if(store.state.user.loginUser?.userRole == ACCESS_ENUM.ADMIN){
    isAdmin.value = 1
  }
  
};

/**
 * 监听 searchParams 变量，改变时触发页面的重新加载
 */
watchEffect(() => {
  loadData();
});

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
  loadData();
});

const columns = [
  {
    title: "状态",
    slotName: "status",
    width: 240,
  },
  {
    title: "比赛名称",
    slotName: "name",
    width: 240,
  },
  {
    title: "起止时间",
    slotName: "startEndTime",
    width: 240,
  },
  {
    title: "题目数量",
    slotName: "questionNum",
    width: 120,
  },
  {
    title: "举办者",
    slotName: "user",
    width: 180,
  },
  {
    title: "操作",
    slotName: "optional",
    width: 180,
  },
];

const onPageChange = (page: number) => {
  searchParams.value = {
    ...searchParams.value,
    current: page,
  };
};

const router = useRouter();


const getColor = (status:number) => {
  switch(status){
    case 1:
      return "green";
    case 2:
      return "blue";
    case 3:
      return "red";
  }

}

/**
 * 跳转到比赛详情页面
 * @param question
 */
const toCompetitionDetails = (id:number) => {
  router.push({
    path: `/competition/details/`+id,
  });
};

/**
 * 修改竞赛
 */
 const doUpdate = (id:number) => {
  router.push({
    path: `/update/competition/${id}`,
  });
}

/**
 * 删除竞赛
 */
const doDelete = async (id:number) => {
  var isTrue = confirm("确定要删除吗？")
  if(!isTrue){
    return;
  }
  const res = await CompetitionControllerService.deleteCompetitionUsingPost(
    id
  );
  if (res.code === 0) {
    message.success("删除成功");
    loadData();
  } else {
    message.error("删除失败");
  }
}

/**
 * 新增竞赛
 */
const toCreateCompetition = () => {
  router.push({
    path: "/add/competition",
  });
}

</script>

<style scoped>
#questionsView {
  max-width: 1280px;
  margin: 0 auto;
}
</style>
